import { Component, Input, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { ActionPnode } from "src/app/@types/pnode";

@Component({
    selector: "action-email-pnode",
    template: `
        <div
            class="node-wrapper"
            [ngClass]="{ empty: !clicked }"
            (click)="demo()"
        >
            <div class="ico-wrapper">
                <img
                    src="https://gitee.com/lyq2/blog-images/raw/master/imgs/email.png"
                    alt="ico"
                />
            </div>
            <div class="title-wrapper">发送邮件</div>
        </div>

        <nz-drawer
            [nzMaskClosable]="true"
            [nzVisible]="visible"
            nzPlacement="right"
            nzTitle="发送邮件"
            [nzWidth]="480"
            (nzOnClose)="close()"
        >
            <form nz-form [formGroup]="validateForm">
                <nz-form-item>
                    <nz-form-label nzRequired nzFor="name"
                        >邮件名称</nz-form-label
                    >
                    <nz-form-control nzErrorTip="名称不能为空">
                        <input
                            nz-input
                            formControlName="name"
                            id="name"
                            [(ngModel)]="data.name"
                        />
                    </nz-form-control>
                </nz-form-item>

                <nz-form-item>
                    <nz-form-label nzRequired>邮件内容</nz-form-label>
                    <nz-form-control nzErrorTip="内容不能为空">
                        <textarea
                            [(ngModel)]="data.content"
                            formControlName="comment"
                            nz-input
                            rows="4"
                            placeholder="write any thing"
                        ></textarea>
                    </nz-form-control>
                </nz-form-item>

                <nz-form-item>
                    <nz-form-label nzRequired>自动重发：</nz-form-label>
                    <nz-form-control>
                        <nz-switch
                            formControlName="auto"
                            [(ngModel)]="data.auto"
                        ></nz-switch>
                    </nz-form-control>
                </nz-form-item>
            </form>
        </nz-drawer>
    `,
})
export class ActionPnodeEmailComponent implements OnInit {
    /** 节点的配置 */
    @Input() data: ActionPnode;

    clicked = false;
    visible = false;

    validateForm!: FormGroup;
    constructor(private fb: FormBuilder) {}

    ngOnInit(): void {
        this.validateForm = this.fb.group({
            name: [null, [Validators.required]],
            comment: [null],
            auto: [null],
        });
    }

    close() {
        this.visible = false;
    }
    demo() {
        this.clicked = true;
        this.visible = true;
    }
}
